/*
 * @Author: wuhao930406 1148547900@qq.com
 * @Date: 2023-09-13 13:54:09
 * @LastEditors: wuhao930406 1148547900@qq.com
 * @LastEditTime: 2023-10-25 14:41:24
 * @FilePath: /utools_web/src/components/Action/index.jsx
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
 */
import { difftimes, difftime } from '@/utils/time';
import { useModel } from '@umijs/max';
import {
  Tooltip,
  DatePicker
} from 'antd';
import dayjs from 'dayjs';
import ChangeUser from './changeuser';
import './index.less';
import { useCallback,useState,useEffect} from 'react';

const Action = ({ item, run, head, isdetail = false }) => {

  const {
    initialState: { currentUser },
  } = useModel('@@initialState');

  //数据渲染不卡顿赋值
  const [dates, setDates] = useState([item?.planStart ? dayjs(item.planStart) : undefined, item?.planEnd ? dayjs(item.planEnd) : undefined]);
  //更新
  useEffect(() => {
    setDates([item?.planStart ? dayjs(item.planStart) : undefined, item?.planEnd ? dayjs(item.planEnd) : undefined])
  }, [item]);


  const dom = useCallback(() => {
    return !item?.planEnd ? <span style={{ color: "#999" }}> 无截止日期 </span> : (
      <Tooltip title={'截止日期: ' + dayjs(item?.planEnd).format('YYYY-MM-DD')} placement='bottomLeft'>
        <div className="center">
          {difftimes(
            dayjs(dayjs(item?.planEnd).format('YYYY-MM-DD') + ' 18:00:00'),
            dayjs(),
            item?.status,
            'format1',
            currentUser?.waringTime,
          )}
        </div>
      </Tooltip>
    )
  }, [item])

  return (
    <div className="center" style={{ fontSize: 12, gap: 8, width: "100%",height:24,overflow:"hidden"}}>
      {head === false ? null : (
        <ChangeUser item={item} run={run} nopopover></ChangeUser>
      )}
      <div style={{ display: 'flex', gap: 8, height: 30, alignItems: "center", flex: 1, justifyContent: "space-between" }}>
        {
          isdetail ? <DatePicker.RangePicker
            variant="borderless"
            size='small'
            placeholder={["开始时间", "截止时间"]}
            style={{ margin: 0, padding: 0 }}
            value={dates}
            onChange={(dates) => {
              setDates(dates)
              run({
                url: '/item/' + item?.id,
                params: { planStart: dates?.[0] ? dates?.[0].format("YYYY-MM-DD") : undefined, planEnd: dates?.[1] ? dates?.[1].format("YYYY-MM-DD") : undefined },
                method: 'PUT',
              });
            }}
          ></DatePicker.RangePicker> : dom()
        }
        <div style={{ opacity: 0.5 }}>
          {difftime(dayjs(), dayjs(item?.createTime))}
        </div>

      </div>
    </div>
  );
};

export default Action;
